<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>


    <footer th:fragment="chargeRecord">
        <div class="tpl-content-wrapper">
            <div class="row-content am-cf">
                <div class="row">
                    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                        <div class="widget am-cf">
                            <div class="widget-head am-cf">
                                <div class="widget-title  am-cf">项目简介</div>
                            </div>
                            <div class="widget-body  am-fr">

                                <div class="am-u-sm-12 am-u-md-6 am-u-lg-4">
                                    <div class="am-form-group">
                                        <div class="am-btn-toolbar">
                                            <div class="am-btn-group am-btn-group-xs">
                                                <button type="button" class="am-btn am-btn-default am-btn-warning" data-toggle="modal" data-target="#myimportModal" ><span class="am-icon-plus"></span> 导入</button>
                                                <button type="button" class="am-btn am-btn-default am-btn-secondary" onclick="desrive()"><span class="am-icon-trash-o"></span> 导出</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="am-u-sm-12 am-u-md-6 am-u-lg-2">
                                    <div class="am-form-group tpl-table-list-select">
                                        <select data-am-selected="{btnSize: 'sm'}" id="chargetype" class="selectOption">
                                            <option value="">请选择</option>
                                            <option value="支付宝" th:selected="${chargetype=='支付宝'}">支付宝</option>
                                            <option value="银行卡" th:selected="${chargetype=='银行卡'}">银行卡</option>
                                        </select>
                                        <select data-am-selected="{btnSize: 'sm'}" id="pagesize" class="selectOption">
                                            <option value="">请选择</option>
                                            <option value="5" th:selected="${pagesize==5}">5</option>
                                            <option value="10" th:selected="${pagesize==10}">10</option>
                                            <option value="10" th:selected="${pagesize==15}">15</option>
                                            <option value="10" th:selected="${pagesize==20}">20</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="am-u-sm-12 am-u-md-6 am-u-lg-2">
                                    <div class="am-input-group am-input-group-sm tpl-form-border-form cl-p">
                                        <input type="date" class="am-form-field" id="predate" th:value="${#dates.format(predate,'yyyy-MM-dd')}">
                                    </div>
                                </div>
                                <div class="am-u-sm-12 am-u-md-6 am-u-lg-2">
                                    <div class="am-input-group am-input-group-sm tpl-form-border-form cl-p">
                                        <div></div>
                                        <input type="date" class="am-form-field" id="nextdate" th:value="${#dates.format(nextdate,'yyyy-MM-dd')}">
                                    </div>
                                </div>
                                <div class="am-u-sm-12 am-u-md-6 am-u-lg-2">
                                    <div class="am-input-group am-input-group-sm tpl-form-border-form cl-p">
                                        <input type="text" class="am-form-field" id="chargekeyword" th:value="${chargekeyword}">
                                        <span class="am-input-group-btn">
                                         <button class="am-btn  am-btn-default am-btn-success tpl-table-list-field am-icon-search" type="button" th:onclick="|page('${usercharge.pageNum}')|"></button>
                                    </span>
                                    </div>
                                </div>

                                <div class="am-u-sm-12">
                                    <div style="overflow-x:scroll">
                                        <table class="am-table am-table-compact am-table-striped tpl-table-black " id="example-r" style="width: 2000px">
                                            <thead>
                                            <tr>
                                                <th><button onclick="reSelect()" class="am-btn  am-btn-default am-btn-success tpl-table-list-field" type="button">反选</button></th>
                                                <th>用户姓名</th>
                                                <th>时间</th>
                                                <th>金额</th>
                                                <th>充值方式</th>
                                                <th>交易号</th>
                                                <th>状态</th>
                                                <th>说明</th>
                                                <th>操作</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr class="gradeX" th:each="uc : ${usercharge.list}">
                                                <td><input type="checkbox" name="persons" th:value="${uc.chargeId}" class="choice"></td>
                                                <th th:text="${uc.userName}"></th>
                                                <th th:text="${#dates.format(uc.chargeTime,'yyyy-MM-dd')}">时间</th>
                                                <th th:text="${uc.chargeMoney}">金额</th>
                                                <th th:text="${uc.chargeType}">充值方式</th>
                                                <th th:text="${uc.chargeOrder}">交易号</th>
                                                <th th:text="${uc.chargeStatus}">状态</th>
                                                <th th:text="${uc.chargeContext}">说明</th>
                                                <td>
                                                    <div class="tpl-table-black-operation">
                                                        <a href="javascript:" data-toggle="modal" data-target="#myModal1" th:onclick="|findmost('${uc.chargeId}')|">更多信息</a>
                                                    </div>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="am-u-lg-12 am-cf">
                                        <div class="am-u-lg-3">
                                            跳转至:<input type="number" id="num">/ 页
                                            <span>
                                            <button class="am-btn  am-btn-default am-btn-success tpl-table-list-field am-icon-search" type="button" th:onclick="findpage()"></button>
                                        </span>
                                        </div>

                                        <div class="am-fr">
                                            <ul class="am-pagination tpl-pagination">
                                                <li ><a href="javascript:" th:onclick="|page('${usercharge.navigateFirstPage}')|">首页</a></li>
                                                <li  th:if="usercharge.hasPreviousPage"><a href="javascript:" th:onclick="|page('${usercharge.prePage}')|">«</a></li>


                                                <li th:each="pageNum:${#numbers.sequence(1,usercharge.pages)}">
                                                    <a th:text="${pageNum}" th:onclick="|page('${pageNum}')|"></a>
                                                </li>


                                                <li th:if="usercharge.hasNextPage"><a href="javascript:" th:onclick="|page('${usercharge.nextPage}')|">»</a></li>
                                                <li><a href="javascript:" th:onclick="|page('${usercharge.navigateLastPage}')|">尾页</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top: 300px">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="myModalLabel">查看充值更多信息</h4>
                        </div>
                        <div id="modele">

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>


            <!--导入模态框-->
            <div class="modal fade" id="myimportModal" tabindex="-1" role="dialog" aria-labelledby="myimportModalLabel" aria-hidden="true" style="margin-top: 300px">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title" id="myimportModalLabel">查看充值更多信息</h4>
                        </div>
                        请选择需要上传的文件：<input type="file" name="file" id="importfile">
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="importscore2()">提交</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>


        </div>



    </footer>

    <script type="text/javascript">


        function page(i) {
            $.ajax({
                url:"/p2p/charge/getUserCharge",
                data:{"chargetype":$("#chargetype").val(),
                    "predate":$("#predate").val(),
                    "nextdate":$("#nextdate").val(),
                    "chargekeyword":$("#chargekeyword").val(),
                    "pagenum":i,
                    "pagesize":$("#pagesize").val()
                },
                type:"get",
                dataType:"html",
                success:function (data) {
                    $("#content").html(data)
                }
            })
        }

        function findpage() {
            var pagesnum=$('#num').val();
            page(pagesnum);
        }

        //详情页
        function findmost(i) {
            $.ajax({
                url: "/p2p/charge/getUser",
                data:{"id":i},
                type: "get",
                dataType:"json",
                success:function (data) {
                    console.log(data)
                    var s="";
                    s+="<div class=\"modal-body\">\n" +
                        "充值类别:<div>"+data.chargeContext+"</div>\n" +
                        "充值金额:<div>"+data.chargeMoney+"</div>\n" +
                        "充值编号:<div>"+data.chargeOrder+"</div>\n" +
                        "充值时间:<div>"+data.chargeTime+"</div>\n" +
                        "充值方式:<div>"+data.chargeType+"</div>\n" +
                        "用户昵称:<div>"+data.userNickname+"</div>\n" +
                        "用户真实姓名:<div>"+data.userRealname+"</div>\n" +
                        "充值状态:<div>"+data.chargeStatus+"</div>\n" +
                        "\n" +
                        "</div>"
                    $('#modele').html(s)
                },
            })
        }



        $(".choice").click(function () {
            if($(this).prop("checked")){
                if(!($(this).val() in charge)){
                    charge.push($(this).val())
                }
            }else if(!$(this).prop("checked")){
                for (var i=0;i<charge.length;i++){
                    if(charge[i]===$(this).val()){
                        charge.splice(i,1);
                    }
                }
            }
        })


        //导出
        function desrive() {
            var ides=charge;
            location.href="/p2p/charge/outCharge?id="+ides;
            charge=[];
        }


        //导入
        function importscore2() {
            var form = new FormData();
            form.append("file", document.getElementById("importfile").files[0]);
            $.ajax({
                url:"/p2p/charge/inCharge",
                data:form,
                type:"post",
                dataType:"text",
                processData: false,
                contentType: false,
                success:function (data) {
                    if(data==1){
                        page(1);
                        alert("导入成功")
                    }else{
                        alert("导入失败")
                    }
                },
            })
        }




    </script>
</head>
</html>
